<template>
    <div style="padding-bottom: 1rem;">
        <c-title text="商家详情"></c-title>
        <div class="list">
            <div class="merchant-item">
                <div class="flex-a-c">
                    <img :src="agent_store_data.change_thumb" />
                    <div style="flex:1;margin-left: .5rem;">
                        <div class="flex-j-sb flex-a-c lh-1">
                            <span class="merchant-item-name">{{ agent_store_data.store_name }}</span>
                            <span class="create-time">{{ agent_store_data.created_at }}</span>
                        </div>
                        <div class="flex-a-c flex-j-sb" style="margin-top: .6875rem;">
                            <div class="address"><i class="iconfont icon-dizhi1"></i>{{ agent_store_data.full_address }}
                            </div>
                            <i @click="link" style="cursor: pointer;" class="iconfont icon-material_goodsCode"></i>
                        </div>
                    </div>
                </div>
                <div class="line"></div>
                <div class="flex-a-c  flex-j-sb" style="margin-top: .6875rem;">
                    <div class="flex-a-c " style="margin-top: .6875rem;justify-content: flex-start;">
                        <span class="f-12">总计流水：</span>
                        <span class="f-14 bold">¥{{ price}} </span>
                    </div>
                    <div class="flex-a-c">
                        <template v-if="agent_store_data.has_one_merchant">
                            <div class="img-div">
                                <img style="border-radius: 50%;margin-right: .25rem;width: 1.25rem;height: 1.25rem;"
                                    :src="agent_store_data.has_one_merchant.has_one_member.avatar_image" />
                            </div>
                            <div class="f-12">{{ agent_store_data.has_one_merchant.has_one_member.nickname }}
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
        <div class="change-box">
            <div @click="showDate = true">
                <span>{{show_month_str?show_month_str:'选择月'}}</span>
                <i class="iconfont icon-xia"></i>
            </div>
            <div @click="showDate2 = true">
                <span>{{show_date_str?show_date_str:'选择日期'}}</span>
                <i class="iconfont icon-xia"></i>
            </div>
        </div>
        <div class="earnings-list-box">
            <template v-for="(item, index) in list">
                <div :key="item.id" class="earnings-list-status-item">
                    <div class="flex-j-sb" style="padding-bottom: 1rem;">
                        <div @click="goto()" style="font-weight: 500;font-size: .875rem;color: #00001C;">{{
                            item.month }}</div>
                        <div @click="handle(item, index)" style="font-size: .875rem;color: #F15353;font-weight: 400;">
                            ¥{{ item.total_amount }}<i
                                :class="index !== current_index ? 'iconfont icon-icon_down1' : 'iconfont icon-icon_up1'"></i>
                        </div>
                    </div>
                    <div style="padding-bottom: .625rem;">
                        <div v-if="index == current_index" class="earnings-details ">
                            <div class="area-more">
                                <template v-for="(c_item, c_index) in order_list">
                                    <div class="flex-j-sb lh-1" style="margin-bottom:.625rem;">
                                        <div style="font-weight: 500;font-size: .8125rem;color: #00001C;">
                                            {{ c_item.order_sn }}
                                        </div>
                                        <div style="font-size: .8125rem;color: #00001C;font-weight: 400;">¥{{
                                            c_item.price
                                        }}
                                        </div>
                                    </div>
                                    <div class="flex-j-sb lh-1">
                                        <div style="font-weight: 500;font-size: .75rem;color: #6E6E79;">
                                            时间：{{ c_item.created_at }}
                                        </div>
                                        <div style="font-size: .75rem;color: #6E6E79;font-weight: 400;">
                                            {{ c_item.status_name}}</div>
                                    </div>
                                    <div class="earnings-details-line" v-if="c_index + 1 !== order_list.length"></div>
                                </template>
                            </div>
                            <template v-if="order_list.length == 0">
                                <div>未查询到流水记录</div>
                            </template>
                        </div>
                    </div>
                </div>
                <div class="line" style="margin:0 0.9375rem 0 ;"></div>
            </template>

        </div>
        <van-popup round v-model="showDate" position="bottom">
            <van-datetime-picker v-model="currentDate" @cancel="showDate = false" @confirm="confirm" title="选择年月"
                :min-date="minDate" :max-date="maxDate" type="year-month" />
        </van-popup>
        <van-popup round v-model="showDate2" position="bottom">
            <van-datetime-picker v-model="currentDate1" @cancel="showDate2 = false" type="date" title="选择年月日"
                :min-date="minDate" @confirm="confirm_day" :max-date="maxDate" />
        </van-popup>
    </div>
</template>

<script>
export default {
    data() {
        return {
            current_index: null,
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(new Date().getFullYear(), 11, 1),
            currentDate: new Date(),
            currentDate1: new Date(),
            showDate2: false,
            showDate: false,
            list: [],
            page: 1,
            last_page: 1,
            isLoadMore: true,
            month: "",
            order_list: [],
            start: "",
            end: "",
            month_start: "",
            month_end: "",
            agent_store_data: {},
            show_date_str:"",
            show_month_str:"",
            price:"",
        };
    },
    activated() {
        this.agent_store_data = JSON.parse(localStorage.getItem('agent_store_data'))
        this.getData();
        this.getDetail()
    },

    methods: {
        getDetail(){
            $http.post('plugin.zhixianggou.api.agent.store-info',{store_id:this.agent_store_data.id},'.').then(res=>{
                console.log(res,'res====');
                if(res.result){
                    this.price = res.data.price;
                }
            })
        },

        observeAreaRoot() {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.addEventListener('scroll', this.handleScroll);
                    } else {
                        entry.target.removeEventListener('scroll', this.handleScroll);
                    }
                });
            });
            observer.observe(document.getElementsByClassName('area-more')[0]);
        },
        handleScroll(event) {
            const scrollTop = event.target.scrollTop;
            const clientHeight = event.target.clientHeight;
            const scrollHeight = event.target.scrollHeight;
            if (scrollTop + clientHeight >= scrollHeight - 10 && this.isLoadMore) { // 10 is a threshold value
                this.isLoadMore = false;
                if (this.page >= this.last_page) {
                    return;
                }
                let page = this.page + 1
                this.get_order(page);
            }
        },

        goto() {
            this.$router.push(this.fun.getUrl('finger_shopping_examine', { store_id: this.agent_store_data.id }))
        },
        handle(item, index) {
            if (this.current_index == index) {
                this.current_index = null;
                return;
            } else {
                this.current_index = index;
            }
            this.show_date_str = '';

            let date = new Date(item.month + '-01');
            const month = date.getMonth() + 1;

            const lastDayOfMonth = new Date(date.getFullYear(), month, 0).getDate();

            // 设置开始日期为当月第一天
            this.start = `${date.getFullYear()}-${month < 10 ? '0' + month : month}-01`;
            // 设置结束日期为当月最后一天
            this.end = `${date.getFullYear()}-${month < 10 ? '0' + month : month}-${lastDayOfMonth}`;

            this.get_order()
        },
        async confirm_day(value) {
            const now = new Date(value);
            const year = now.getFullYear();
            const month = now.getMonth() + 1;
            const date = now.getDate();
            const lastDayOfMonth = new Date(year, month, 0).getDate();
            // 设置开始日期为当月第一天
            this.start = `${year}-${month < 10 ? '0' + month : month}-${date < 10 ? '0' + date : date}`;
            // 设置结束日期为当月最后一天
            this.end = `${year}-${month < 10 ? '0' + month : month}-${date < 10 ? '0' + date : date}`;

            this.month_start = `${year}-${month < 10 ? '0' + month : month}-01`;
            this.month_end = `${year}-${month < 10 ? '0' + month : month}-${lastDayOfMonth}`;
            this.current_index = 0;
            await this.getData()
            await this.get_order()
            this.show_month_str = `${year}-${month < 10 ? '0' + month : month}`
            this.show_date_str = `${year}-${month < 10 ? '0' + month : month}-${date < 10 ? '0' + date : date}`;
            this.showDate2 = false;
        },
        get_order(page = 1) {
            let json = { page, store_id: this.$route.params.store_id };
            if (this.start == '' && this.end == '') {
                json.start = this.month_start;
                json.end = this.month_end;
            } else {
                json.start = this.start;
                json.end = this.end;
            }

            $http.post('plugin.zhixianggou.api.agent.store-order-list', json, '.').then(res => {
                this.isLoadMore = true;
                if (res.result) {
                    this.order_list = page == 1 ? res.data.data : this.order_list.concat(res.data.data);
                    this.page = res.data.current_page;
                    this.last_page = res.data.last_page;
                    this.$nextTick(() => {
                        this.observeAreaRoot();
                    })
                } else {
                    this.$toast(res.msg);
                }
            })

        },
        getData() {
            let json = { store_id: this.$route.params.store_id };
            if (this.month_start) {
                json.start = this.month_start;
            }
            if (this.month_end) {
                json.end = this.month_end;
            }

            $http.post('plugin.zhixianggou.api.agent.store-order-group', json, '.').then(res => {
                if (res.result) {
                    this.list = res.data;
                } else {
                    this.$toast(res.msg);
                }
            })
        },
        link() {
            this.$router.push(this.fun.getUrl('finger_shopping_payee_qr_code', { store_id: this.agent_store_data.id }))
        },
        confirm(value) {
            const now = new Date(value);
            const year = now.getFullYear();
            const month = now.getMonth() + 1;
            const lastDayOfMonth = new Date(year, month, 0).getDate();
            // 设置开始日期为当月第一天
            this.month_start = `${year}-${month < 10 ? '0' + month : month}-01`;
            // 设置结束日期为当月最后一天
            this.month_end = `${year}-${month < 10 ? '0' + month : month}-${lastDayOfMonth}`;
            this.current_index = null;
            this.getData();
            this.showDate = false;
            this.show_date_str = '';
            this.show_month_str = `${year}-${month < 10 ? '0' + month : month}`;
        },
    }
};
</script>

<style scoped lang='scss'>
.c-999 {
    color: #999999;
}

.area-more {
    max-height: 18.75rem;
    overflow-y: scroll;
}

.bold {
    font-weight: bold;
}

.lh-1 {
    line-height: 1;
}

.change-box {
    display: flex;
    align-items: center;
    padding: 0 0 .2188rem;
    justify-content: space-evenly;
    margin: 0 .75rem;
    border-radius: .5rem;

    div {
        cursor: pointer;
    }

    .icon-xia {
        color: #AAAAB3;
    }
}

.earnings-list-box {
    margin: .625rem .75rem;
    border-radius: .5rem;
    overflow: hidden;

    .icon-icon_down1,
    .icon-icon_up1 {
        color: #AAAAB3;
        margin-left: .6875rem;
    }

    .line {
        height: 1px;
        background: #F0F0F1;
        margin: .75rem .1563rem 1.0625rem;

    }

    .earnings-details {
        background-color: #FAFAFA;
        padding: .9375rem 1.125rem .9688rem .7188rem;
    }

    .line:last-child {
        display: none;
    }

    .earnings-details-line {
        margin: .6563rem 0;
        height: 1px;
        background-color: #F0F0F1;
    }

    .earnings-list-status-item {
        cursor: pointer;
        padding: 1.125rem .9375rem 0;
        background-color: #fff;


    }

}

.list {
    padding: .625rem .75rem;

    .line {
        height: 1px;
        background: #F0F0F1;
        margin: .75rem .1563rem .6875rem;

    }



    .line {
        height: 1px;
        background: #F0F0F1;
        margin: .75rem .1563rem 1.0625rem;

    }

    .merchant-item {
        padding: .75rem .75rem .9375rem;
        border-radius: .5rem;
        background-color: #fff;
        margin-bottom: .625rem;

        .merchant-item-name {
            font-weight: bold;
            font-size: .9375rem;
            color: #00001C;


        }

        .create-time {
            font-weight: 400;
            font-size: .75rem;
            color: #999999;
            line-height: 1;
        }

        .icon-dizhi1 {
            font-size: .625rem;
            margin-right: .1563rem;
        }

        .address {
            font-weight: normal;
            font-size: .75rem;
            color: #999999;
            text-align: left;
        }

        img {
            width: 3rem;
            height: 3rem;
            border-radius: .625rem .625rem .625rem .625rem;
            margin: 0;
        }
    }

}
</style>